<template>
    <div class="header">
        <div class="header-back">
            <span class="iconfont icon-back">&#xe7eb;</span>
        </div>
        <div class="header-input">
            <span class="iconfont icon-search">&#xe819;</span>
            输入城市/景点/游玩主题
        </div>
        <div class="header-city">
            <router-link to="/city" title="城市选择"><span class="city-name">{{ this.$store.state.city }}</span><span class="iconfont icon-city">&#xe8ec;</span></router-link>
        </div>
    </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style scoped>
  .header {
      display: flex;
      height: .88rem;
      line-height: .88rem;
      background: #00bcd4;
      color: #fff;
  }
  .header-back {
      float: left;
      width: .8rem;
      text-align: center;
  }
  .icon-back {
      font-size: .36rem;
  }
  .header-input {
      flex: 1;
      height: .6rem;
      line-height: .6rem;
      background: #fff;
      border-radius: .06rem;
      color: #e4e7ea;
      padding-left: .1rem;
      margin: .14rem 0;
  }
  .icon-search {
      font-size: .32rem;
      margin-left: .04rem;
  }
  .header-city {
      float: right;
      min-width: 1.12rem;
      padding: 0 .1rem;
      text-align: center;
  }
  .city-name {
      color: #fff;
  }
  .icon-city{
      font-size: .24rem;
      margin-left: .04rem;
      color: #fff;
  }
</style>>
